<template>
	<view>
		<u-popup :show="show" @close="close" mode="center" :round="10">
			<view class="">
				<view class="mainpadding">
					<view class="bigtext xiaohei margin_top2">任务备注</view>
					<textarea class="textarea margin_top" placeholder="请输入备注信息"></textarea>
				</view>
				<view class="queren flexcenter margin_top5">确认</view>
			</view>
		</u-popup>
		<u-navbar title="任务管理" placeholder autoBack>
			<view class="flexright" slot="right"  @click="jumpurl('/pages_mypage/tianjiarenwu')">
				<u-icon name="plus-circle" color="#666666" size="24"></u-icon>
			</view>
		</u-navbar>
		<view class="ffffff ">
			<u-tabs :list="tabs" lineColor="#fe8604" :activeStyle="{
			    color: '#333',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)',
				fontSize:'30rpx'
			}" :inactiveStyle="{
			    color: '#999',
			    transform: 'scale(1)',
				fontSize:'30rpx'
			}" keyName="name" @click="tabclick"></u-tabs>
		</view>
		<view class="mainpadding2">
			<view class="flexcolumn" v-if="list.data.length==0">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
				<view class="xiaohui margin_top main_size">暂无数据</view>
			</view>
			<view class="ffffff mainpadding margin_top radius" v-for="item in list.data" :key="item.id" @click="jumpdetail('/pages_mypage/renwuxqpt?id=',item.id)">
				<view class="xiahuaxian">
					<view class="flexbetween">
						<view class="hhbtn flexcenter" v-if="item.task_category_id!=1">{{item.taskcategory.name}}/{{item.carattr.name}}</view>
						<view class="labletext xiaohuang margin_right" v-if="item.task_category_id==1">其他</view>
						<!-- 0=待确认,1=待领取,2=平台待指定,3=进行中,4=待审核,5=已完成,6=已终止 -->
						<view class="titletext xiaohuang" v-if="item.status==0">待确认</view>
						<view class="titletext xiaohuang" v-if="item.status==1">待领取</view>
						<view class="titletext xiaohuang" v-if="item.status==2">待指定</view>
						<view class="titletext xiaohuang" v-if="item.status==3">进行中</view>
						<view class="titletext xiaohuang" v-if="item.status==4">待审核</view>
						<view class="titletext xiaolv" v-if="item.status==5">已完成</view>
						<view class="titletext xiaohui" v-if="item.status==6">已终止</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="titletext fonweight xiaohei">{{item.tasktime_text}}</view>
						<view class="sanshier xiaohong fonweight">{{item.score}}</view>
					</view>
				</view>
				<view class="yihang margin_top" v-if="item.task_category_id!=1">
					<text class="lvdian margin_right2"></text>
					<text class="xiaolv main_size margin_right2">距你{{returnKmUnit(Number(item.distance1))}}</text>
					<text class="xiaohei main_size margin_right2">{{item.start_address}}</text>
				</view>
				<view class="yihang margin_top">
					<text class="huangdian margin_right2"></text>
					<text class="xiaohuang main_size margin_right2">距你{{returnKmUnit(Number(item.distance1))}}</text>
					<text class="xiaohei main_size margin_right2">{{item.end_address}}</text>
				</view>
				<view class="boxhui mainpadding_top" v-if="item.taskitem.length">
					<view class="flexbetween" @click.stop="item.iszk = !item.iszk">
						<view class="xiaohui main_size">任务要求</view>
						<u-icon name="arrow-right" color="#999" size="20" v-show="!item.iszk"></u-icon>
						<u-icon name="arrow-down" color="#999" size="20" v-show="item.iszk"></u-icon>
					</view>
					<template v-if="item.iszk">
						<view class="" v-for="ite in item.taskitem" :key="ite.id">
							<view class="main_size xiaohui margin_top">{{ite.name}}</view>
							<view class="flexleft flex_wrap">
								<view class="itemimgBox flexcenter margin_top2" v-for="(it,index) in ite.images_text" :key="index" @click.stop="lbtpriview(index,ite.images_text)">
									<view class="listleftimg">
										<image class="listleftimg radius" :src="it" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 0=待确认,1=待领取,2=平台待指定,3=进行中,4=待审核,5=已完成,6=已终止 -->
				<view class="flexright flex_wrap">
					<view class="qhbtn flexcenter margin_top2 margin_left1"  @click.stop="jumpdetail('/pages_mypage/renwubeizhu?id=',item.id)">任务备注</view>
					<view class="qhbtn flexcenter margin_top2 margin_left1"  @click.stop="jumpdetail('/pages_mypage/renwuyq?id=',item.id)">任务要求</view>
					<view class="qhbtn flexcenter margin_top2 margin_left1"  @click.stop="jumpdetail('/pages_mypage/tianjiarenwu?id=',item.id)">编辑</view>
					<view class="qhhbtn flexcenter margin_top2 margin_left1"  @click.stop="currentid=item.id;showModal('是否确认删除任务？')">删除</view>
					<view class="qhrbtn flexcenter margin_top2 margin_left1" v-if="item.status==0" @click.stop="currentid=item.id;showModal('是否确认任务？')">确认任务</view>
					<view class="qhrbtn flexcenter margin_top2 margin_left1" v-if="item.status<3" @click.stop="jumpdetail('/pages_mypage/zhipaisiji?id=',item.id)">指派司机</view>
					<view class="qhbtn flexcenter margin_top2 margin_left1" v-if="item.status==3" @click.stop="jumpdetail('/pages_mypage/zhipaisiji?id=',item.id)">更换司机</view>
					<view class="qhrbtn flexcenter margin_top2 margin_left1" v-if="item.status!=6" @click.stop="currentid=item.id;showModal('是否确认终止任务？')">终止任务</view>
					<view class="qhrbtn flexcenter margin_top2 margin_left1" v-if="item.status==4" @click.stop="currentid=item.id;showModal('是否确认审核任务？')">审核任务</view>
				</view>
			</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				isActive: 1,
				navList: [{
					index: 1,
					title: '接送机任务'
				}, {
					index: 2,
					title: "其他任务"
				}],
				tabsid: 1,
				tabs: [{
					id: 1,
					name: '接送机任务',
				}, {
					id: 2,
					name: '其他任务',
				}],
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				lat: "",
				lng: "",
				isLoad: false,
				modal:{
					modalShow:false,
					title:"",
				},
				currentid:"",
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.getLocation()
			// #endif
			// #ifdef H5
			this.getrwlx()
			// #endif
		},
		onShow() {
			if (this.isLoad) {
				this.init()
			}
		},
		methods: {
			showModal(val){
				this.modal.title = val
				this.modal.modalShow = true
			},
			modalSure(){
				if(this.modal.title=="是否确认终止任务？"){
					this.zhongzhiorder()
				}else if(this.modal.title=="是否确认任务？"){
					this.querenorder()
				}else if(this.modal.title=="是否确认审核任务？"){
					this.shenheorder()
				}else if(this.modal.title=="是否确认删除任务？"){
					this.shanchuorder()
				}
				this.modalcancel()
			},
			modalcancel(){
				this.modal.modalShow = false
			},
			zhongzhiorder(){//终止任务
				httpRequest.request('/api/admintask/stopTask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			querenorder(){//确认任务
				httpRequest.request('/api/admintask/sureTask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			shenheorder(){//审核任务
				httpRequest.request('/api/admintask/applyTask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			shanchuorder(){//删除任务
				httpRequest.request('/api/admintask/delTask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.hideLoading()
						console.log(res, "获取定位成功");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getrwlx()
					},
					fail(err) {
						uni.hideLoading()
						console.log(err, 23432);
					}
				});
			},
			tabclick(e) {
				this.tabsid = e.id
				this.init()
			},
			getrwlx() {
				httpRequest.request('/api/taskcl/taskCategortyIndex', 'GET', {}, false, false, true).then(res => {
					this.tabs = res.data
					this.tabsid = res.data[0].id
					this.init()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					task_category_id:this.tabsid,
					lat: this.lat,
					lng: this.lng,
				}
				let url = '/api/admintask/taskIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					this.isLoad = true
					if (res.code == 1) {
						res.data.data.forEach(item => {
							this.$set(item, "iszk", false)
						})
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if(!list.last_page){
					return false
				}
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			close() {
				this.show = false
			},
			checked(index) {
				this.isActive = index
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.queren{
		width: 625rpx;
		height: 99rpx;
		font-weight: 500;
		font-size: 30rpx;
		background-color: #ff8505;
		color: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
	}
	.textarea{
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #DFDFDF;
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
	}
	.qhrbtn {
		border-radius: 12rpx;
		background-color: #FF8505;
		font-weight: 500;
		font-size: 26rpx;
		padding: 15rpx 30rpx;
		color: #FFf;
	}
	.qhhbtn{
		border-radius: 12rpx;
		background-color: #ff0000;
		font-weight: 500;
		font-size: 26rpx;
		padding: 15rpx 30rpx;
		color: #FFf;
	}

	.qhbtn {
		border-radius: 12rpx;
		background-color: #fff3e6;
		font-weight: 500;
		font-size: 26rpx;
		padding: 15rpx 30rpx;
		color: #FF8505;
	}

	.hhbtn {
		// width: 155rpx;
		padding: 10rpx 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FF8505;
		background: #fff3e6;
		border-radius: 15rpx 51rpx 51rpx 0rpx;
	}

	.tab_nav {
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 36rpx;
		height: 6rpx;
		background-color: #FF8505;
		border-radius: 9rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
</style>